// import Icon from '@/components/Icon'
// import { Button } from 'antd-mobile'
// import React from 'react'

// export default function Login() {
//   return <div>Login
//     <hr />
//     <Button color='primary' fill='outline' size='large'>登录</Button>
//     {/* svg使用icon图标的原生写法 aria-hidden="true" 残障人士等特殊人群的屏幕读取器不识别 */}
//     {/* <svg className='icon' aria-hidden="true">
//       <use xlinkHref='#iconbtn_like_sel'></use>
//     </svg> */}
//     <Icon name='iconbtn_like_sel' onClick={() => {
//       console.log('000000')
//     }}></Icon>
//   </div>
// }
import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { NavBar, Form, Input, List, Button, Toast, InputRef } from 'antd-mobile'
import { useHistory } from 'react-router'
import { LoginForm } from '@/types/data'
import { useDispatch } from 'react-redux'
import { getCode, login } from '@/store/actions/login'
import Icon from '@/components/Icon'
import { FormInstance } from 'antd-mobile/es/components/form'

export default function Login() {
  const history = useHistory()
  const dispatch = useDispatch()
  // 登录
  const handleLogin = async(values: LoginForm) => {
    const action = login(values) // login() 的返回值才是登录请求的异步函数
    // try{
      await dispatch(action)
      Toast.show({
        content: "登录成功", // 提示文案
        icon: <Icon name="iconbtn_like_sel"></Icon>,
        // icon: 'success', // 图标
        duration: 1000, // 提示时长
        afterClose: () => {
          // 提示完成后要做的事情
          history.push('/home')
        }
      })
    // } catch (e) {
    //   // AxiosError  axios内置的错误类型
    //   const error = e as AxiosError<ApiRes>
    //   Toast.show({
    //     content: error.response?.data.message, // 提示文案
    //     icon: 'fail', // 图标
    //     duration: 1000, // 提示时长
    //   })
    // }
  }

  // 获取Form组件
  // 方法一： 创建Form组件的ref  FormInstance是Form组件的类型
  const formRef = useRef<FormInstance>(null) 
  // 方法二： 组件库自带
  const [form] = Form.useForm()
  // 创建Input组件的ref
  const inputRef = useRef<InputRef>(null)
  // 定义一个倒计时的秒数
  const [seconds, setSeconds] = useState(0)
  // 创建ref存储定时器id
  const timeId = useRef<number>(-1)
  // 发送验证码
  const onGetCode = async() => {
    if(seconds > 0) {
      return
    }
    // 获取手机号
    // const mobile = formRef.current!.getFieldValue('mobile')
    const mobile = form.getFieldValue('mobile') 
    console.log(mobile,'jjjj')
    // 校验获取的手机号
    const errors = form.getFieldError('mobile')
    if(errors.length > 0) {
      inputRef.current!.focus()
      return
    }
    await dispatch(getCode(mobile))
    // 初始化秒数
    setSeconds(60)
    timeId.current = window.setInterval(() => {
      // 拿上一次的状态 - 1 s是上一次的状态
      setSeconds(s => s- 1)
    },1000)
  }
  // 使用useEffect  seconds=0时清除定时器  依赖项seconds  seconds=0时执行useEffect函数
  useEffect(() => {
    if(seconds <= 0) {
      clearInterval(timeId.current)
    }
  }, [seconds]) // 依赖项  该依赖项数据发生变化时会执行该useEffect函数

  // 离开该页面时  清楚定时器   --》组件卸载时  
  useEffect(() => {
    clearInterval(timeId.current)
  }, [])


  return (
    <div className={styles.root}>
      <NavBar onBack={() => history.go(-1)}></NavBar>

      <div className="login-form">
        <h2 className="title">登录</h2>

        <Form form={form} onFinish={handleLogin} ref={formRef}>
          <Form.Item 
            className="login-item"
            validateTrigger={['onChange', 'onBlur']} 
            rules={[
              { required: true, message: '手机号不能为空' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
            ]} 
            name='mobile'
          >
            <Input placeholder="请输入手机号"></Input>
          </Form.Item>
          
          <List.Item
            className="login-code-extra"
            extra={<span className="code-extra" onClick={onGetCode}>
              {seconds === 0 ? '发送验证码' : `${seconds}s后重新获取`}
              </span>}
          >
            <Form.Item 
              className="login-item"
              name="code"
              validateTrigger={['onChange', 'onBlur']}
              rules={[
                { required: true, message: '验证码不能为空' },
                { pattern: /^\d{6}$/, message: '验证码格式错误' }
              ]}
            >
              <Input placeholder="请输入验证码" ref={inputRef}></Input>
            </Form.Item>
          </List.Item>
          
          <Form.Item>
            <Button color="primary" className="login-submit" block type='submit'>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
